Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br
5o. módulo

Desenvolvimento Web (DWEI5)

AULA 12 - APIs HTML E FERRAMENTAS ÚTEIS PARA DESENVOLVIMENTO

Agenda

  • File API
  • LocalStorage
  • Ferramentas úteis para desenvolvimento
  • Perguntas

1. APIs HTML

1.1. File API - Imagens

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <div id="container">
    <h2>Selecionando arquivos - File API</h2>
    <p>Pressione o botão e selecione os arquivos de imagens desejados:
      <label for="arquivo">Selecionar arquivos</label>
      <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
    </p>
    <div>
      <h4>Miniaturas</h4>
      <span id="miniatura"></span>
    </div>
  </div>

  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}

label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}

/* Arquivo js.js */
let container = document.getElementById("miniatura");

function exibir(files) {
  for (let i=0; i < files.length; i++) {
     let f = files[i];
     let leitor = new FileReader();
     leitor.onload = function(e) {
          let img = document.createElement("img");
          img.src = e.target.result;
          img.width = 100;
          container.appendChild(img);
    };
    leitor.readAsDataURL(f);
  }

}

Saída:

  • Interface Inicial.

  • O Gerenciador de arquivos será aberto conforme seu Sistema Operacional.

  • Após a seleção dos arquivos.

1.2. File API - Leitura

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <div id="container">
        <h2>Lendo arquivos Textos ou PDF- File API</h2>
        <p>Pressione o botão e selecione os arquivos de imagens desejados:
          <label for="arquivo">Selecionar arquivos</label>
          <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
        </p>
        <div>
          <h4>Conteúdo</h4>
          <textarea wrap="soft" cols="50" id="conteudo"></textarea>
        </div>
    </div>

    <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}

label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}
textarea {
  height: 500px;
}

/* Arquivo js.js */
let arquivosConteudo = document.getElementById("conteudo");

function exibir(files) {
    console.log("Exibir arquivos");
    for (let i = 0, f; f = files[i]; i++) {
            let leitor = new FileReader();
            // Adicionar o evento para a Leitura
            addLeitura(leitor, f.name);
            // Efetuando Leitura
            leitor.readAsText(f);
        }
    }

    function addLeitura(leitor, name) {
        leitor.onload = function(e) {
            arquivosConteudo.value += "*** Lendo arquivo " + name + " ***";
            arquivosConteudo.value += e.target.result;
        };
    }

Saída:

  • Interface Inicial.

  • O Gerenciador de arquivos será aberto conforme seu Sistema Operacional.

  • Após a seleção dos arquivos.

1.3. File API - Informações do Arquivo (metadados)

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <div id="container">
      <h2>Lendo Informações (metadados) - File API</h2>
      <p>Pressione o botão e selecione o arquivo para obter as informações desejadas:
        <label for="arquivo">Selecionar arquivos</label>
        <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="informacoes();">
      </p>
      <div>
        <h4>Informações do Arquivo</h4>
        <div>
          <ul>
            <li>Nome: <span id="nome"></span></li>
            <li>Tamanho: <span id="tamanho"></span></li>
            <li>Tipo: <span id="tipo"></span></li>
            <li>Data última modificação: <span id="datainfo"></span></li>
          </ul>
        </div>
      </div>
    </div>
    <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}
label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}
h4, h2 {
  color: #0D47A1;
}

/* Arquivo js.js */
function informacoes() {
      let selecao = document.getElementById('arquivo').files[0];
      document.querySelector("#nome").innerHTML = selecao.name;
      document.querySelector("#tamanho").innerHTML = selecao.size + "  bytes";
      document.querySelector("#tipo").innerHTML = selecao.type;
      document.querySelector("#datainfo").innerHTML = selecao.lastModifiedDate;
}

Saída:

  • Interface Inicial.

  • O Gerenciador de arquivos será aberto conforme seu Sistema Operacional.

  • Após a seleção dos arquivos.

2. Local Storage

2.1. Local Storage com Console

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Local Storage</title>
</head>
<body>
    <h6> Veja o console log. </h6>

    <script>
    // Dados salvos
    localStorage.ultimoNome = "Giancoli";
    localStorage.primeiroNome = "Ana";
    localStorage.cidade = "Bragança Paulista";

    // Dados recuperados
    let ultimoNome = localStorage.ultimoNome;
    let primeiroNome = localStorage.primeiroNome;
    let cidade = localStorage.cidade;

    console.log("Informações recuperadas do Local Storage ");
    console.log(primeiroNome);
    console.log(ultimoNome);
    console.log(cidade);
    </script>
</body>
</html>

2.2. Local Storage com Formulário

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Form example</title>
  <style>
    fieldset {
      padding: 10px;
      border-radius: 10px;
    }
    h2 {
      color: #0D47A1;
    }
    legend {
      background-color: #3498db;
      padding: 10px;
      border-radius: 2em;
      border: 2px solid #2e6da4;
    }

    label, button {
      background-color: #3498db;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      margin: 10px;
      padding: 6px 20px;
      display: inline-block;
      width: 100px;
    }
    input {
      float: right;
      margin-right: 70px;
      width: 200px;
    }
    input:invalid {
      background-color: pink;
    }
    input:valid {
      background-color: lightskyblue;
    }
  </style>
</head>
<body>
  <h2>Entre com os valores e recarregue a qualquer hora.</h2>
  <form action="" method="POST" autocomplete="off">
      <fieldset>
        <legend>Informações pessoais</legend>
        <label for="primeiroNome">Primeiro nome:</label>
        <input type="text" id="primeiroNome" required name="primeiroNome">
        <br>
        <label for="ultimoNome">Sobrenome:</label>
        <input type="text" id="ultimoNome" required name="ultimoNome">
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" required name="email">
        <br>
        <label for="idade">Idade:</label>
        <input type="number" min=0 max=120  step=5 id="age" required name="idade">
        <br>
        <label for="data">Aniversário:</label>
        <input type="date"  id="data" required name="data">
      </fieldset>
      <button>Enviar</button>
  </form>
<script>
    function enviarForm() {
      console.log("Enviando.....");
      return false;
    }

    /* Chamando a função para carregar automaticamente ao abrir a página */
    window.onload = init;

    function init() {
      console.log("Adding input listener to all input fields");
      // Evento aguardando inserção no formulário
      let listaItens = document.querySelectorAll("input");
      for(let i= 0; i < listaItens.length; i++) {
         addItens(listaItens[i]);
      }
      // Recuperando valores salvos no Local Storage
      restoreFormContent();
    }

    function addItens(entrada) {
        entrada.oninput = function(event) {
          localStorage.setItem(entrada.id, entrada.value);
        };
    }

    function restoreFormContent() {
      console.log("Recuperando dados do Local Storage...");
      //Recuperando a lista de itens salvos
      let listaItens = document.querySelectorAll("input");
      for ( let i= 0; i < listaItens.length; i++) {
          let campoRecup = listaItens[i];
          let id = campoRecup.id;
          let valorSalvo = localStorage.getItem(id);

          if(valorSalvo !== undefined) {
            campoRecup.value = valorSalvo;
          }
      }
    }
</script>
</body>
</html>

Saída:

3. Ferramentas úteis de desenvolvimento

3.1. Gulp

  • Site oficial do Gulp.

  • De acordo com [GulpJS.com], o Gulp é "um kit de ferramentas para automatizar e aprimorar seu fluxo de trabalho. Aproveite o gulp e a flexibilidade do JavaScript para automatizar fluxos de trabalho lentos e repetitivos e compô-los em pipelines de construção eficientes".

3.2. Grunt

3.3. Git

  • Git é um sistema de controle de versão distribuído open source que facilita ações com o GitHub em seu notebook ou desktop. Serão apresentados um resumo das instruções comumente usadas via linha de comando do Git para referência rápida.

Guia

3.4. Github

  • Para ler mais a respeito do github, acesse Github.com.

3.5. Markdown

  • Markdown é uma linguagem de marcação com formatação leve que você pode adicionar aos seus elementos de textos de uma forma simples.
  • Foi criada por John Gruber em 2004 e desde então é uma das linguagens de marcação mais popular no mundo.
  • Para criar um arquivo do tipo markdown, basta usar as sintaxes definidas e salvá-lo com a extensão .md.
  • Um editor online de markdown, é o Dillinger.io.

Guia 1 . .

Guia 2

3.6. Gimp

  • Gimp é um software para manipulação de imagens, similar ao Photoshop, porém open source.

3.7. Chrome DevTools

  • O Chrome DevTools "é um conjunto de ferramentas de auditoria e depuração de Web incorporado ao Google Chrome. Use o DevTools para iterar, depurar e criar o perfil do seu site".
  • Chrome DevTools

3.8. Lighthouse e PageSpeed

  • O Lighthouse "é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Ele pode ser executado como extensão do Chrome ou na linha de comando. Informe ao Lighthouse um URL que você quer auditar. Ele executará uma série de testes na página e gerará um relatório sobre o desempenho da página. Nesse relatório, você poderá usar os testes que apresentaram falha como indicadores do que pode ser feito para aprimorar o aplicativo". Lighthouse.

  • O PageSpeed informa o desempenho real de uma página para dispositivos móveis e computadores. Sobre o PageSpeed Insights.

3.9. Minifier

  • Por que to minify seu codígo HTML, CSS e JS?
  • De acordo com Rafael H., em seu artigo: Melhorando o desempenho do site – Minify CSS, HTML e JavaScript, Minify "é um termo de programação que se refere a um processo de remoção de caracteres desnecessários para que o código seja executado. Minificando o código, acelera o carregamento da página e resulta em visitantes felizes. Em resumo, este processo irá remover caracteres de espaço em branco desnecessários, novos caracteres de linha, comentários e delimitadores de bloco do seu código. Esses tipos de caracteres são usados para fins de legibilidade e visual, mas eles não são necessários para o código executar corretamente. No resultado final, a minificação acelerará o download, a análise e o tempo de execução."
  • Utilize os validadores de códigos, ferramentas de auditoria e depois que tudo estiver pronto para ir para produção, faça a minificação antes de super seus códigos.
  • Minificador de HTML: Minify Code.
  • Minificador de CSS: Minify Code.
  • Minificador de JS: Minify Code.
  • Neste outro, você seleciona a opção JS ou CSS.
  • Nesta página, você utilizará com o seu código javascript, JavaScript Minifier.

3.10. Heroku

  • De acordo com GeekHunter - Heroku: o que é e como funciona, a heroku "é uma plataforma nuvem que faz deploy de várias aplicações back-end seja para hospedagem, testes em produção ou escalar as suas aplicações. Também tem integração com o GitHub, deixando o uso mais fácil e com containers denominados Dyno".
  • Pesquise sobre Heroku.

3.11. Metodologia BEM (CSS-in-JS)

  • É uma metodologia que vem ganhando popularidade a passos largos, criado pela Yandex, o BEM, Block Element Modifier.
  • De acordo com Eduardo Rabelo - Uma linguagem de estilos unificada, "BEM (quando aplicado puramente ao CSS), é apenas uma convenção de nomes, sendo limitado apenas ao estilo dos nomes de classes com o padrão .Block__element — modifier".

  • "Em qualquer base de código usando BEM, desenvolvedores devem lembrar como seguir as regras do BEM a todo momento. Quando seguido a risca, BEM funciona muito bem. Mas, porque devemos deixar algo fundamental, como o escopo de nossos seletores, na responsabilidade de uma convenção de nomes? Se eles explicitamente dizem isso ou não. mas a maioria das bibliotecas CSS-in-JS estão seguindo a mentalidade BEM ao mapear estilos para elementos individuais da sua UI. Porém, elas são implementadas de uma maneira radicalmente diferente".

  • Artigo do Felipe Fialho - Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história.

  • Artigo do Daniel Del Core.
  • Artigo do IamManchanda - Parte I.
  • Artigo do IamManchanda - Parte II.

3.12. Service Workers

  • É um script executado em segundo plano pelo navegador, independente da página da web.
  • Possibilita recursos que não precisam de uma página web ou mesmo interação com o usuário.
  • Antes do Service Workers, existia outra API que fazia este trabalho, conhecida como AppCache, que permitia experiências oofline.
  • Os Service Workers foram projetados para evitar diversos problemas com a AppCache API.

  • Os Service Workers oferecem a base técnica para os seguintes recursos estarem disponíveis na web:

    • Experiências offline avançadas.
    • Sincronização periódicas em segundo plano.
    • Notificações push.

  • Os Service Workers possuem um ciclo de vida no qual consiste em:

    • Registrar (service worker),
    • Efetivar a instalação (download cache de armazenamento),
    • Ativar (service worker),
    • Controlar (páginas do escopo),
    • Estados (encerrado, tratando eventos e mensagens)

3.13. Subindo seu projeto Front-End gratuitamente com Github Pages

3.14 Amazon S3

  • Para maiores informações, consulte Amazon S3.
  • De acordo com [Amazon S3], "o Amazon Simple Storage Service (Amazon S3) é um serviço de armazenamento de objetos que oferece escalabilidade líder do setor, disponibilidade de dados, segurança e performance. Isso significa que clientes de todos os tamanhos e setores podem usá-lo para armazenar qualquer volume de dados em uma grande variedade de casos de uso, como sites, aplicações para dispositivos móveis, backup e restauração, arquivamento, aplicações empresariais, dispositivos IoT e análises de big data. O Amazon S3 fornece recursos de gerenciamento fáceis de usar, de maneira que você possa organizar os dados e configurar os controles de acesso refinados para atender a requisitos específicos comerciais, organizacionais e de conformidade".

Referências

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas

  • Esclareça suas eventuais dúvidas durante as aulas.
  • Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
  • Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.